<template>
	<view>

		<view class="top">
			<view style="height: 70rpx;"></view>
			<view class="top-bg"></view>
			<view class="top-row">
				<view>
					<view class="top-title">储存卡内存</view>
					<view class="top-sub">已用 4.0G，共 20G</view>
				</view>
				<button class="top-btn" @click="onSelect" v-if="!isSelect">选择</button>
				<button class="top-btn" @click="isSelect=false" v-else>取消</button>

			
			</view>
			<view class="top-progress-wrap">
				<view class="top-progress-bar">
					<view class="top-progress-inner" :style="{
						width: progress + '%',
						background: progress > 80 ? '#ff4d4f' : '#19c37c'
					}"></view>
				</view>
			
				<view class="top-date">2019年12月1日</view>
			</view>

		</view>
		<view style="position: relative;">
			<view class="tip">
					<view class="tip-icon">!</view>
					<text class="tip-text">内存不足，即将开始循环删除</text>
				</view>
		</view>
		
		<view class="images" style="z-index: 999;position: relative;">
	
			<scroll-view scroll-y style="height: calc(100vh - 280rpx);">
				<view class="image-list">
					<view v-for="(item, idx) in list" :key="idx" class="image-list-item" @click="toggleSelect(idx)">
						<image class="image-item-img" src="/static/image/damao.png" mode="aspectFill" />
						<view v-if="item.sel" class="image-select-check">
							<svg viewBox="0 0 48 48" width="38rpx" height="38rpx">
								<rect x="2" y="2" width="44" height="44" rx="8" fill="#19c37c"/>
								<polyline points="14,26 22,34 34,16" fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="con" style="z-index: 9999999;">
			<view class="con-btn con-btn-left"  v-if="!isSelect">
				<text class="con-btn-icon tn-icon-sequence-vertical"></text>
			</view>
			<view class="con-switch-bg" v-if="!isSelect">
				<view class="con-switch-item u-f-ajc" :class="{active: switchType==='year'}" @click="switchType='year'">年</view>
				<view class="con-switch-item u-f-ajc" :class="{active: switchType==='month'}" @click="switchType='month'">月</view>
				<view class="con-switch-item u-f-ajc" :class="{active: switchType==='all'}" @click="switchType='all'">全部</view>
			</view>
			<view class="con-btn con-btn-right"  @click="onClose" v-if="!isSelect">
				<text class="con-btn-icon" >✕</text>
			</view>
			<view class="con-btn con-btn-right" @click="del" style="margin-left: auto;margin-right: 80rpx;"  v-if="isSelect">
				<image style="width: 50rpx;height: 50rpx; "
					src="@/static/image/icon/del.png"
					mode="scaleToFill"
				/>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			list: [
				{
					sel:false
				}
			],
			isSelect: false,
			switchType: 'all',
			progress: 90 // 这里可以根据实际数据动态赋值
		}
	},
	methods: {
		onSelect() {
			this.isSelect = true
		},
		onClose() {
			uni.navigateBack({
				 delta: 1
			});
		},
		toggleSelect(idx) {
			if (!this.isSelect) {
				uni.navigateTo({ url: '/pages/video/imageDetail' })
				return
			 }
			this.list[idx].sel = !this.list[idx].sel
		}
	}
}
</script>

<style scoped>
.image-item-img{

	border-radius: 5rpx;
	width: 140rpx;
	height: 130rpx;
	margin-top: 10rpx;
	/* margin-right: 10rpx; */
}
.top {
	padding-top: 150rpx;
	color: #eee;
	position: relative;
	padding: 36rpx 32rpx 32rpx 32rpx;
	height: 280rpx;
	overflow: hidden;
	background:#fff;
	z-index: 1000;
}

.top-bg {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	background: linear-gradient(180deg, #999 0%, #eee 100%);
}

.top-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	z-index: 1;
}

.top-title {
	font-size: 40rpx;
	font-weight: bold;
	color: #fff;
	margin-bottom: 12rpx;
}

.top-sub {
	font-size: 24rpx;
	margin-top: 25rpx;
	margin-bottom: 1rpx;
}

.top-btn {
	margin-left: auto !important;
	margin-right: 0 !important;
	background: #d5d5d5;
	text-align: right;
	color: #222;
	font-size: 28rpx;
	border-radius: 45rpx;
	padding: 0rpx 40rpx;
	border: none;
	outline: none;
	box-shadow: none;
}

.top-progress-wrap {
	width: 350rpx;
	margin-top: 12rpx;
	position: relative;
	z-index: 99;
}

.top-progress-bar {
	width: 100%;
	height: 12rpx;
	background: #eee;
	border-radius: 8rpx;
	overflow: hidden;
}

.top-progress-inner {
	height: 100%;
	background: #19c37c;
	border-radius: 8rpx;
}

.top-date {
	margin-left: auto !important;
	position: absolute;
	right: -340rpx;
	bottom: -10rpx;

	font-size: 30rpx;
	color: #fff;
	z-index: 299;
}

.image-list {
	display: flex;
	flex-wrap: wrap;
}
.image-list-item {
	width: 20%;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.image-select-check {
	position: absolute;
	right: 12rpx;
	bottom: 10rpx;
	width: 38rpx;
	height: 38rpx;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
}
.con {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 100rpx;
	left: 0;
	z-index: 10;
	pointer-events: none;
}
.con-btn {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background: rgba(255,255,255,0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 48rpx;
	margin: 0 10rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
	pointer-events: auto;
	
}
.con-btn-icon {
	font-size: 48rpx;
	color: #222;
}
.con-switch-bg {
	min-width: 340rpx;
	height: 80rpx;
	background: rgba(255,255,255,0.6);
	-webkit-backdrop-filter: blur(16px);

	border-radius: 50rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
	margin: 0 30rpx;
	pointer-events: auto;
	backdrop-filter: blur(66px);
}
.con-switch-item {
	flex: 1;
	text-align: center;
	font-size: 28rpx;
	color: #222;
	padding: 0 18rpx;
	border-radius: 40rpx;
	transition: background 0.2s, color 0.2s;
}
.con-switch-item.active {
	height: 100%;
	padding: 0 28rpx;
	background: #fff;
	color: #222;
	font-weight: bold;
}
.tip {
  display: flex;
  align-items: center;
  padding: 0 10rpx 0 16rpx;
  height: 50rpx;
  border-radius: 30rpx;
  background: rgba(0,0,0,0.6);

  position: absolute;
  left: 20rpx;
  top:-30rpx;
  z-index: 9999;
  width: auto;
  max-width: 90%;
}
.tip-icon {
	width: 38rpx;
	height: 38rpx;
	border-radius: 50%;
	background: #FFC300;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	margin-right: 12rpx;
	font-weight: bold;
}
.tip-text {
	color: #fff;
	font-size: 22rpx;
	font-weight: 400;
}
</style>